function SysGrid() {
    this.headData = []; // header data
    this.bodyData = []; // body data
    this.gridDivId = ""; // div contain id
    this.gridObjName = "";

    var objContent; // 装表格的 Div 容器对象
    var objHead; // 表格头对象
    var objBody; // 表格内容对象 
    var objToolbar; // 表格工具栏对象 

    this.h = 0; // 高
    this.w = 0; // 宽
    this.dataUrl = ''; // 数据链接

    this.imgRelateLoc = ''; // 相对地址
}

SysGrid.prototype = {
               
    init: function(tbObjName, tbDivId, tbHeader, tbConfig) {
        this.gridDivId = tbDivId;
        this.gridObjName = tbObjName;
        this.objContent = $("#" + tbDivId);
        this.headData = tbHeader;
                    
        var headContentId = tbDivId + "_header";
        var bodyContentId = tbDivId + "_body";
        var toolbarId = tbDivId + "_toolbar";
                    
        $("#" + tbDivId).append("<div class='systb_hd' id='" + headContentId + "'></div>");
        $("#" + tbDivId).append("<div class='systb_bd' id='" + bodyContentId + "'></div>");
        $("#" + tbDivId).append("<div class='ph_grid_toolbar' id='" + toolbarId + "'></div>");
        this.objHead = $("#" + headContentId);
        this.objBody = $("#" + bodyContentId);
        this.objToolbar = $("#" + toolbarId);
                    
        this.h = tbConfig.height;
        this.w = tbConfig.width;
        this.dataUrl = tbConfig.url;
        this.imgRelateLoc = tbConfig.imgRelateLoc;
                    
        // 设置样式
        this.objContent.addClass("systb");
    },
    
    ajaxCall: function(result) {
        this.bodyData = eval(result);  // 取得内容数据

        // 填充内容
        this.objHead.html("");
        this.objBody.html("");
        this.objToolbar.html("");
        this.objHead.append(this.genHeader());
        this.objBody.append(this.genBody());
        this.objToolbar.append(this.genToolbar1());

        // 设置表
        this.setTable();
    },
                
    setTable: function() {
        // 设置表容器宽度和高度
        this.objContent.css("height", this.h + "px");
        this.objContent.css("width", this.w + "px");
                    
        // 设置表内容高度
        var headHeight = this.objHead.attr("scrollHeight");
        var toolbarHeight = this.objToolbar.attr("scrollHeight");
        this.objBody.css("height", (this.h - headHeight - toolbarHeight - 2) + "px");
                    
        // 设置单元格
        this.setTableCol();
    },
                
    // 设置单元格宽度
    setTableCol: function() {
        // header
        var th = this.objHead.find("div"); // 找到表头里面包含的所有div
        var i,j,k,l;
        var colW;
        var aw = 0; // 总宽度，没有定义的列除外
        var ou; // 没有定义的列div
        for(i = 0; i < th.length; i++) {
            k = -1;
            colW = "undefined";
            for(l = 0; l < this.headData.length; l++) {
                if(this.headData[l].width != 0) {
                    k++; 
                    if(k == i) {
                        colW = this.headData[l].width; 
                        break;
                    }
                }
            }
            if(colW != "undefined" && colW != undefined) {
                $(th[i]).parent().css("width", colW + "px");
                $(th[i]).css("width", (colW - 8) + "px");
                aw += (colW + 2);
            } else {
                ou = th[i];
            }
        }
        // 表格内容宽度，不包含滚动条
        var cbW = this.objBody.attr("scrollWidth");
        // 设置没有定义的列的宽度
        $(ou).parent().css("width", (cbW - aw) + "px");
        $(ou).css("width", (cbW - aw - 8) + "px");
                    
        // body
        var trs = this.objBody.find("tr"); // 找到表内容里面包含的所有tr
        for(j = 0; j < trs.length; j++) {
            var tds = $(trs[j]).find("div"); // 找到每一行里面包含的所有div
            for(i = 0; i < tds.length; i++) {
                colW = "undefined";
                k = -1;
                for(l = 0; l < this.headData.length; l++) {
                    if(this.headData[l].width != 0) {
                        k++; 
                        if(k == i) {
                            colW = this.headData[l].width; 
                            break;
                        }
                    }
                }
                if(colW != "undefined" && colW != undefined) {
                    $(tds[i]).parent().css("width", colW + "px");
                    $(tds[i]).css("width", (colW - 8) + "px");
                } else {
                    $(tds[i]).parent().css("width", (cbW - aw) + "px");
                    $(tds[i]).css("width", (cbW - aw - 8) + "px");
                }
            }
        }
        $(".ellipsis").each(function() {
            ellipsis($(this))
        });
        // 设置表头宽度
        $(this.objHead.find("table")[0]).css("width", cbW + "px");
    },
                
    // 生成表头
    genHeader: function() {
        var i = 0;
        var sepStr = "<td width='2' class='systb_hd_sep' valign='bottom'></td>"; // 列分隔线
        var result = "<table width='100%' border='0' " +
            "cellspacing='0' cellpadding='0'><tr>";
        for(i = 0; i < this.headData.length; i++) {
            if(this.headData[i].width == 0) {
                continue;
            }
            if("checkbox" == this.headData[i].type ) {
                result += "<td><div class='systb_col_hd_div'>&nbsp;</div></td>";
            } else {
                if(this.headData[i].align == "right" || this.headData[i].align == "center") {
                    result += "<td><div class='systb_col_hd_div'"
                        + "style='text-align:" + this.headData[i].align + "'>"
                        + this.headData[i].label + "</div></td>";
                }  else {
                    result += "<td><div class='systb_col_hd_div'><h5 class='ellipsis'>"
                        + this.headData[i].label + "</h5></div></td>";
                }
            }

            // 每一列后面跟一条分隔线
            result += sepStr;
        }

        // 最后一列则把分隔线去掉
        result = result.substr(0, result.length - sepStr.length);

        result += "</tr></table>";
        return result;
    },
                
    // 生成表内容
    genBody: function() {
        var links;
        var colId;
        var bd;
        var i = 0, j = 0;
        
        var t_td; // td
        var t_div; // div
        var t_ellipsis; // 省略号
        var t_content; // 单元格内容
        
        var sepStr = "<td width='2' class='systb_hd_sep' valign='bottom'></td>"; // 列分隔线
        var result = "<table width='100%' border='0' " +
            "cellspacing='0' cellpadding='0'>";
        for(i = 1; i < this.bodyData.length; i++) {
            result += "<tr id='" + this.gridDivId + "_" + i + "'>";
            bd = this.bodyData[i];
            for(j = 0; j < bd.length; j++) {
                if(this.headData[j].width == 0) {
                    continue;
                }
                colId = this.gridDivId + "_" + i + "_" + j;
                
                // td
                // 隔行背景
                if(i % 2 == 1) {
                    t_td = ["<td class='systb_col1' id='" + colId + "'>", "</td>"];
                } else {
                    t_td = ["<td class='systb_col' id='" + colId + "'>", "</td>"];
                }
                // div 和省略号
                if(this.headData[j].align == "right" || this.headData[j].align == "center") {
                    t_div = ["<div class='systb_col_div' style='text-align:"
                            + this.headData[j].align + "'>", "</div>"];
                    t_ellipsis = ["", ""];
                } else {
                    t_div = ["<div class='systb_col_div'>", "</div>"];
                    t_ellipsis = ["<h5 class='ellipsis'>", "</h5>"];
                }
                // 内容： 包含链接的情况
                if(this.headData[j].type == "script"){
                    t_content = "<a href='#' onclick='" + this.headData[j].script 
                        + "(" + this.gridObjName + "," + i + ");'>" + bd[j] + "</a>";
                } else if(this.headData[j].type == "checkbox"){
                    t_content = "<input type='checkbox' name='" + this.gridDivId 
                        + "_checkbox' onchange='xsysGridSelectedRow(" + this.gridObjName + "," + i + ");' value='" 
                        + bd[j] + "'/>";
                } else {
                    t_content = bd[j];
                }
                
                // 串
                result += t_td[0] + t_div[0] + t_ellipsis[0]
                    + t_content + t_ellipsis[1] + t_div[1] + t_td[1];

                // 列分隔线
                result += sepStr;
            }
            
            // 最后一列则把分隔线去掉
            result = result.substr(0, result.length - sepStr.length);

            result += "</tr>";
        }
        result += "</table>";
        return result;
    },

    genToolbar: function() {
        var toolb = this.bodyData[0];
        var result = "";
        result += "<img src='" + this.imgRelateLoc + "search.png' onclick=\"xsysGridSearch(" + this.gridObjName + ")\">";
        result += "<img src='" + this.imgRelateLoc + "separator.png'>";
        var size10 = "";
        var size30 = "";
        var size50 = "";
        var size100 = "";
        if(toolb[0] == 30) {
            size30 = " selected";
        } else if(toolb[0] == 50) {
            size50 = " selected";
        } else if(toolb[0] == 100) {
            size100 = " selected";
        } else {
            size10 = " selected";
        }
        result += "<select type='text' id='xsysGridPageSize_" + this.gridDivId + "' "
            + " name='xsysGridPageSize_" + this.gridDivId + "' onchange='xsysGridPageSize(" + this.gridObjName + ")'"
            + " class='ph_grid_input_page_size'> "
            + "<option value='10'" + size10 + ">10</option>"
            + "<option value='30'" + size30 + ">30</option>"
            + "<option value='50'" + size50 + ">50</option>"
            + "<option value='100'" + size100 + ">100</option>"
            + "</select>";
        result += "<img src='" + this.imgRelateLoc + "separator.png' class='ph_grid_separator'>";
        result += "<img src='" + this.imgRelateLoc + "resultset_first.png' onclick='xsysGridFirst(" + this.gridObjName + ")'>";
        result += "<img src='" + this.imgRelateLoc + "resultset_previous.png' onclick='xsysGridPrevious(" + this.gridObjName + ")'>";
        result += "<img src='" + this.imgRelateLoc + "separator.png' class='ph_grid_separator'>";
        result += "第 <input type='text' id='xsysGridPageNum_" + this.gridDivId + "' "
            + "name='xsysGridPageNum_" + this.gridDivId + "' value='" + toolb[1] + "' "
            + "class='ph_grid_input_page_num'> 页，共 " + toolb[2] + " 页";
        result += "<img src='" + this.imgRelateLoc + "separator.png' class='ph_grid_separator'>";
        result += "<img src='" + this.imgRelateLoc + "resultset_next.png' onclick='xsysGridNext(" + this.gridObjName + ")'>";
        result += "<img src='" + this.imgRelateLoc + "resultset_last.png' onclick='xsysGridLast(" + this.gridObjName + ")'>";
        result += "<img src='" + this.imgRelateLoc + "separator.png' class='ph_grid_separator'>";
        result += "<img src='" + this.imgRelateLoc + "arrow_refresh.png' onclick='xsysGridRefresh(" + this.gridObjName + ")'>";
        result += "<img src='" + this.imgRelateLoc + "separator.png' class='ph_grid_separator'>";
        result += "总共 " + toolb[5] + " 条，显示第 " + toolb[3] + " 到 " + toolb[4] + " 条";
        return result;
    },

    genToolbar1: function() {
        var toolb = this.bodyData[0];
        var result = "";
        result += "<div class='xsys_panel_grid_toolbar_left'>"
        result += "<img src='" + this.imgRelateLoc + "resultset_first.png' onclick='xsysGridFirst(" + this.gridObjName + ")'>";
        result += "<img src='" + this.imgRelateLoc + "resultset_previous.png' onclick='xsysGridPrevious(" + this.gridObjName + ")'>";
        result += "<img src='" + this.imgRelateLoc + "separator_blank.png' class='ph_grid_separator'>";
        result += toolb[1] + " / " + toolb[2] + "";
        result += "<img src='" + this.imgRelateLoc + "separator_blank.png' class='ph_grid_separator'>";
        result += "<img src='" + this.imgRelateLoc + "resultset_next.png' onclick='xsysGridNext(" + this.gridObjName + ")'>";
        result += "<img src='" + this.imgRelateLoc + "resultset_last.png' onclick='xsysGridLast(" + this.gridObjName + ")'>";
        result += "</div>"
        result += "<div class='xsys_panel_grid_toolbar_right'>";
        result += toolb[3] + " - " + toolb[4] + " of " + toolb[5];
        result += "</div>";
        result += "<div class='xsys_panel_grid_toolbar_clear'></div>"
        return result;
    },
                
    // 设置大小
    setRect: function(w, h) {
        this.w = w;
        this.h = h;
    }
}

function xsysGridSearch(gridObj) {

}

function xsysGridPageSize(gridObj) {
    var num = 1;
    var size = $("#xsysGridPageSize_" + gridObj.gridDivId).val();
    $.get(gridObj.dataUrl, {pageSize: size, pageNum: num}, function(result) {
        gridObj.ajaxCall(result);
    });
}

function xsysGridFirst(gridObj) {
    var toolb = gridObj.bodyData[0];
    var num = 1;
    if(toolb[1] <= 1) {
        alert("已经是第一页"); 
        return;
    } 
    var size = $("#xsysGridPageSize_" + gridObj.gridDivId).val();
    $.get(gridObj.dataUrl, {pageSize: size, pageNum: num}, function(result) {
        gridObj.ajaxCall(result);
    });
}

function xsysGridPrevious(gridObj) {
    var toolb = gridObj.bodyData[0];
    var num = 1;
    if(toolb[1] <= 1) {
        alert("已经是第一页"); 
        return;
    } else {
        num = toolb[1] - 1;
    }
    var size = $("#xsysGridPageSize_" + gridObj.gridDivId).val();
    $.get(gridObj.dataUrl, {pageSize: size, pageNum: num}, function(result) {
        gridObj.ajaxCall(result);
    });
}

function xsysGridNext(gridObj) {
    var toolb = gridObj.bodyData[0];
    var num = 1;
    if(toolb[2] < (toolb[1] + 1)) {
        alert("已经是最后一页"); 
        return;
    } else {
        num = toolb[1] + 1;
    }
    var size = $("#xsysGridPageSize_" + gridObj.gridDivId).val();
    $.get(gridObj.dataUrl, {pageSize: size, pageNum: num}, function(result) {
        gridObj.ajaxCall(result);
    });
}

function xsysGridLast(gridObj) {
    var toolb = gridObj.bodyData[0];
    var num = toolb[2];
    if(toolb[2] < (toolb[1] + 1)) {
        alert("已经是最后一页"); 
        return;
    } 
    var size = $("#xsysGridPageSize_" + gridObj.gridDivId).val();
    $.get(gridObj.dataUrl, {pageSize: size, pageNum: num}, function(result) {
        gridObj.ajaxCall(result);
    });
}

function xsysGridRefresh(gridObj) {
    var toolb = gridObj.bodyData[0];
    var num = toolb[1];
    var size = $("#xsysGridPageSize_" + gridObj.gridDivId).val();
    $.get(gridObj.dataUrl, {pageSize: size, pageNum: num, _: new Date()}, function(result) {
        gridObj.ajaxCall(result);
    });
}

function xsysGridSelectedRow(gridObj, rowNum) {
    alert(rowNum);
}